<template>
  <div class="basic-container">
    <Card
      title="基本信息"
    >
      <a-form :form="form" class="role-account-modify-container">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="群组名称">
              <a-input
                v-decorator="[
                  'group_name',
                  {
                    initialValue: group.full_name,
                    rules: [
                      { required: true, message: 'required' }
                    ]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="状态">
              <a-input
                disabled
                :value="group.active ? '使用中' : '禁用'"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="备注">
              <a-input
                v-decorator="[
                  'desc',
                  {
                    initialValue: group.desc || '',
                  }
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </Card>
  </div>
</template>

<script>
import BasicForm from '../modify/Basic.vue'
import { Card } from '@/components'
import props from './props'

export default {
  mixins: [props],
  data () {
    return {
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },

  components: {
    Card,
  },

  methods: {
    handleSubmit () {
      return new Promise((resolve, reject) => {
        this.form.validateFields((err, values) => {
          if (!err) {
            const { gid } = this

            modifyGroup({ gid, ...this.form.getFieldsValue() })
              .then((data) => {
                resolve(data)
              })
              .catch(error => {
                reject(error)
              })
          } else {
            reject(err)
          }
        })
      })
    },
  },
}
</script>

<style lang="scss">
.role-account-modify-container {
  .ant-form-item {
    // margin-bottom: $margin-xs;
  }
}
</style>
